import React, { useState, useEffect, useRef } from 'react'; // 导入React和useState
import { Table, Button, Modal, Space, Tag, Card, Popconfirm, message, Cascader } from 'antd'; // 导入Ant Design组件
import { EyeOutlined, CheckCircleTwoTone, CloseCircleTwoTone, CarOutlined, StopOutlined, DownloadOutlined, GlobalOutlined } from '@ant-design/icons'; // 导入图标
import ReactECharts from 'echarts-for-react'; // 导入ECharts组件
import * as echarts from 'echarts'; // 导入echarts核心
import chinaProvinces from '../utils/chinaProvinces'; // 导入中国省份标准列表（需新建）

// 地域模拟数据（用于Cascader和订单生成）
const regions = [
  { province: '广东省', city: '广州市', district: '天河区', town: '员村镇' },
  { province: '广东省', city: '深圳市', district: '南山区', town: '南头镇' },
  { province: '浙江省', city: '杭州市', district: '西湖区', town: '留下镇' },
  { province: '江苏省', city: '苏州市', district: '吴中区', town: '木渎镇' },
  { province: '山东省', city: '青岛市', district: '黄岛区', town: '辛安镇' },
  { province: '四川省', city: '成都市', district: '武侯区', town: '金花镇' },
  { province: '湖北省', city: '武汉市', district: '江夏区', town: '纸坊镇' },
  { province: '福建省', city: '厦门市', district: '集美区', town: '灌口镇' },
  { province: '重庆市', city: '渝北区', district: '渝北区', town: '双凤桥街道' },
  { province: '河北省', city: '石家庄市', district: '裕华区', town: '方村镇' }
];

const regionOptions = [
  {
    value: '广东省', label: '广东省', children: [
      { value: '广州市', label: '广州市', children: [
        { value: '天河区', label: '天河区', children: [ { value: '员村镇', label: '员村镇' } ] },
      ] },
      { value: '深圳市', label: '深圳市', children: [
        { value: '南山区', label: '南山区', children: [ { value: '南头镇', label: '南头镇' } ] },
      ] },
    ]
  },
  {
    value: '浙江省', label: '浙江省', children: [
      { value: '杭州市', label: '杭州市', children: [
        { value: '西湖区', label: '西湖区', children: [ { value: '留下镇', label: '留下镇' } ] },
      ] },
    ]
  },
  {
    value: '江苏省', label: '江苏省', children: [
      { value: '苏州市', label: '苏州市', children: [
        { value: '吴中区', label: '吴中区', children: [ { value: '木渎镇', label: '木渎镇' } ] },
      ] },
    ]
  },
  {
    value: '山东省', label: '山东省', children: [
      { value: '青岛市', label: '青岛市', children: [
        { value: '黄岛区', label: '黄岛区', children: [ { value: '辛安镇', label: '辛安镇' } ] },
      ] },
    ]
  },
  {
    value: '四川省', label: '四川省', children: [
      { value: '成都市', label: '成都市', children: [
        { value: '武侯区', label: '武侯区', children: [ { value: '金花镇', label: '金花镇' } ] },
      ] },
    ]
  },
  {
    value: '湖北省', label: '湖北省', children: [
      { value: '武汉市', label: '武汉市', children: [
        { value: '江夏区', label: '江夏区', children: [ { value: '纸坊镇', label: '纸坊镇' } ] },
      ] },
    ]
  },
  {
    value: '福建省', label: '福建省', children: [
      { value: '厦门市', label: '厦门市', children: [
        { value: '集美区', label: '集美区', children: [ { value: '灌口镇', label: '灌口镇' } ] },
      ] },
    ]
  },
  {
    value: '重庆市', label: '重庆市', children: [
      { value: '渝北区', label: '渝北区', children: [
        { value: '渝北区', label: '渝北区', children: [ { value: '双凤桥街道', label: '双凤桥街道' } ] },
      ] },
    ]
  },
  {
    value: '河北省', label: '河北省', children: [
      { value: '石家庄市', label: '石家庄市', children: [
        { value: '裕华区', label: '裕华区', children: [ { value: '方村镇', label: '方村镇' } ] },
      ] },
    ]
  }
];

// 省份名称映射表
const provinceNameMap = {
  '北京市': '北京', '天津市': '天津', '上海市': '上海', '重庆市': '重庆',
  '河北省': '河北', '山西省': '山西', '辽宁省': '辽宁', '吉林省': '吉林', '黑龙江省': '黑龙江',
  '江苏省': '江苏', '浙江省': '浙江', '安徽省': '安徽', '福建省': '福建', '江西省': '江西',
  '山东省': '山东', '河南省': '河南', '湖北省': '湖北', '湖南省': '湖南', '广东省': '广东',
  '海南省': '海南', '四川省': '四川', '贵州省': '贵州', '云南省': '云南', '陕西省': '陕西',
  '甘肃省': '甘肃', '青海省': '青海', '台湾省': '台湾',
  '广西壮族自治区': '广西', '内蒙古自治区': '内蒙古', '西藏自治区': '西藏',
  '宁夏回族自治区': '宁夏', '新疆维吾尔自治区': '新疆',
  '香港特别行政区': '香港', '澳门特别行政区': '澳门'
};

// 动态加载中国地图JSON
function useChinaMap() {
  useEffect(() => {
    fetch('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000')
      .then(res => res.json())
      .then(geoJson => {
        echarts.registerMap('china', geoJson);
      });
  }, []);
}

// 随机生成订单数据
function generateOrders(count = 80) {
  const products = ['iPhone 15', '小米电视', '华为Mate60', '联想笔记本', '美的空调', '戴尔显示器'];
  const customers = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十'];
  const statusArr = ['待付款', '已付款', '待发货', '已发货', '已完成', '已取消'];
  const orders = [];
  for (let i = 1; i <= count; i++) {
    const region = regions[Math.floor(Math.random() * regions.length)];
    const status = statusArr[Math.floor(Math.random() * statusArr.length)];
    orders.push({
      id: i,
      orderNo: `2024${String(i).padStart(4, '0')}`,
      customer: customers[Math.floor(Math.random() * customers.length)],
      status,
      total: Math.floor(Math.random() * 9000 + 1000),
      address: `${region.province}${region.city}${region.district}${region.town}XX路${Math.floor(Math.random()*100)+1}号`,
      region: `${region.province}/${region.city}/${region.district}/${region.town}`,
      items: `${products[Math.floor(Math.random() * products.length)]} x${Math.floor(Math.random()*3+1)}`
    });
  }
  return orders;
}

const initialOrders = generateOrders(80); // 生成80条订单

const OrderManagement = () => {
  useChinaMap(); // 注册中国地图
  // 订单列表
  const [orders, setOrders] = useState(initialOrders);
  // 地域筛选
  const [regionFilter, setRegionFilter] = useState([]);
  // 详情模态框显示
  const [detailVisible, setDetailVisible] = useState(false);
  // 当前详情订单
  const [detailOrder, setDetailOrder] = useState(null);
  // 地图分析模态框
  const [mapVisible, setMapVisible] = useState(false);
  // 用户省份（用ref避免重复渲染）
  const userProvinceRef = useRef(null);
  // 热力图显示控制
  const [heatMapVisible, setHeatMapVisible] = useState(false); // 控制热力图显示

  // 页面加载时获取用户省份
  useEffect(() => {
    // 使用阿里云IP定位API获取用户省份
    fetch('https://restapi.amap.com/v3/ip?key=1e3e1e2e1e3e1e2e1e3e1e2e1e3e1e2e') // 请替换为你自己的高德key
      .then(res => res.json())
      .then(data => {
        if (data && data.province) {
          // 只取省份部分
          let province = data.province;
          // 统一为标准省名
          province = provinceNameMap[province] || province;
          userProvinceRef.current = province;
        }
      });
  }, []);

  // 地域筛选处理
  const handleRegionChange = (value) => {
    setRegionFilter(value);
  };

  // 根据地域筛选订单
  const filteredOrders = orders.filter(order => {
    if (!regionFilter.length) return true;
    const regionArr = order.region.split('/');
    for (let i = 0; i < regionFilter.length; i++) {
      if (regionArr[i] !== regionFilter[i]) return false;
    }
    return true;
  });

  // 统计省份订单数量
  const provinceStats = {};
  filteredOrders.forEach(order => {
    let province = order.region.split('/')[0];
    province = provinceNameMap[province] || province; // 映射为标准省名
    provinceStats[province] = (provinceStats[province] || 0) + 1;
  });
  const mapData = Object.keys(provinceStats).map(province => ({
    name: province, // 省份名
    value: provinceStats[province], // 订单数
    // 有订单的省份加粗边框
    itemStyle: {
      borderColor: '#ff6600', // 边框颜色
      borderWidth: 2 // 边框加粗
    },
    label: {
      show: true,
      color: '#d0021b',
      fontWeight: 'bold'
    }
  }));

  // 获取当前筛选的省份名，只高亮该省份
  const selectedProvince = regionFilter.length > 0 ? (provinceNameMap[regionFilter[0]] || regionFilter[0]) : null;

  // ECharts地图配置
  const mapOption = {
    title: { text: '订单省份分布', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}<br/>订单数: {c}' },
    visualMap: {
      min: 0,
      max: Math.max(...mapData.map(d => d.value), 10),
      left: 'left',
      top: 'bottom',
      text: ['高','低'],
      inRange: { color: ['#e0ffff', '#006edd'] },
      show: true
    },
    series: [
      {
        name: '订单数',
        type: 'map',
        map: 'china',
        roam: true,
        label: { show: true },
        data: mapData,
        // 鼠标悬浮时进一步高亮
        emphasis: {
          itemStyle: {
            areaColor: '#ffb300', // 悬浮高亮色
            borderColor: '#ff6600',
            borderWidth: 3
          },
          label: {
            show: true,
            color: '#d0021b',
            fontWeight: 'bold'
          }
        },
        // 只高亮当前筛选省份
        selectedMode: 'single',
        select: selectedProvince ? { name: selectedProvince } : undefined
      }
    ]
  };

  // 统计所有中国省份的订单数，未下单省份value为0
  const provinceOrderStats = {};
  // 初始化所有省份为0
  chinaProvinces.forEach(prov => { provinceOrderStats[prov] = 0; });
  // 累加订单省份
  orders.forEach(order => {
    let province = order.region.split('/')[0];
    province = provinceNameMap[province] || province;
    if (provinceOrderStats[province] !== undefined) {
      provinceOrderStats[province]++;
    }
  });
  // 构造热力图数据
  const heatMapData = chinaProvinces.map(prov => ({ name: prov, value: provinceOrderStats[prov] }));

  // 热力图ECharts配置
  const heatMapOption = {
    title: { text: '中国各省份订单热力图', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}<br/>订单数: {c}' },
    visualMap: {
      min: 0,
      max: Math.max(...heatMapData.map(d => d.value), 10),
      left: 'left',
      top: 'bottom',
      text: ['高','低'],
      inRange: { color: ['#e0ffff', '#006edd'] },
      show: true
    },
    series: [
      {
        name: '订单数',
        type: 'map',
        map: 'china',
        roam: true,
        label: { show: true },
        data: heatMapData
      }
    ]
  };

  // 导出CSV
  const handleExport = () => {
    const header = '订单号,客户,商品,金额,地域,收货地址,状态\n';
    const rows = filteredOrders.map(o =>
      [o.orderNo, o.customer, o.items, o.total, o.region, o.address, o.status].join(',')
    ).join('\n');
    const csv = header + rows;
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '订单导出.csv';
    a.click();
    URL.revokeObjectURL(url);
  };

  // 发货
  const handleShip = (record) => {
    setOrders(orders.map(item => item.id === record.id ? { ...item, status: '已发货' } : item));
    message.success('发货成功');
  };

  // 取消订单
  const handleCancel = (record) => {
    setOrders(orders.map(item => item.id === record.id ? { ...item, status: '已取消' } : item));
    message.success('订单已取消');
  };

  // 查看详情
  const handleDetail = (record) => {
    setDetailOrder(record);
    setDetailVisible(true);
  };

  // 订单表格列
  const columns = [
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
    { title: '客户', dataIndex: 'customer', key: 'customer' },
    { title: '商品', dataIndex: 'items', key: 'items' },
    { title: '金额', dataIndex: 'total', key: 'total', render: (v) => `￥${v}` },
    { title: '地域', dataIndex: 'region', key: 'region' },
    { title: '收货地址', dataIndex: 'address', key: 'address' },
    { title: '状态', dataIndex: 'status', key: 'status', render: (text) => {
      if (text === '已发货') return <Tag icon={<CheckCircleTwoTone twoToneColor="#52c41a" />} color="success">已发货</Tag>;
      if (text === '已取消') return <Tag icon={<CloseCircleTwoTone twoToneColor="#f5222d" />} color="error">已取消</Tag>;
      if (text === '已完成') return <Tag color="green">已完成</Tag>;
      if (text === '待付款') return <Tag color="orange">待付款</Tag>;
      if (text === '已付款') return <Tag color="blue">已付款</Tag>;
      return <Tag color="blue">{text}</Tag>;
    } },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button icon={<EyeOutlined />} size="small" onClick={() => handleDetail(record)}>详情</Button>
          {record.status === '待发货' && <Button icon={<CarOutlined />} size="small" onClick={() => handleShip(record)}>发货</Button>}
          {record.status === '待发货' && <Popconfirm title="确定取消该订单吗？" onConfirm={() => handleCancel(record)} okText="确定" cancelText="取消">
            <Button icon={<StopOutlined />} size="small" danger>取消</Button>
          </Popconfirm>}
        </Space>
      )
    }
  ];

  return (
    <Card title="订单管理" bordered={false}> {/* 外层卡片 */}
      <Space style={{ marginBottom: 16 }}>
        <Cascader options={regionOptions} onChange={handleRegionChange} placeholder="请选择地域筛选" changeOnSelect allowClear style={{ width: 300 }} />
        <Button icon={<DownloadOutlined />} onClick={handleExport}>导出Excel</Button>
        <Button icon={<GlobalOutlined />} onClick={() => setHeatMapVisible(true)}>显示热力图</Button> {/* 新增按钮 */}
      </Space>
      <Table columns={columns} dataSource={filteredOrders} rowKey="id" pagination={{ pageSize: 10 }} />
      <Modal
        title="订单详情"
        open={detailVisible}
        onOk={() => setDetailVisible(false)}
        onCancel={() => setDetailVisible(false)}
        footer={null}
      >
        {detailOrder && (
          <div>
            <p><b>订单号：</b>{detailOrder.orderNo}</p>
            <p><b>客户：</b>{detailOrder.customer}</p>
            <p><b>商品：</b>{detailOrder.items}</p>
            <p><b>金额：</b>￥{detailOrder.total}</p>
            <p><b>地域：</b>{detailOrder.region}</p>
            <p><b>收货地址：</b>{detailOrder.address}</p>
            <p><b>状态：</b>{detailOrder.status}</p>
          </div>
        )}
      </Modal>
      <Modal
        title="中国各省份订单热力图"
        open={heatMapVisible}
        onCancel={() => setHeatMapVisible(false)}
        footer={null}
        width={800}
      >
        <ReactECharts option={heatMapOption} style={{ height: 500 }} />
      </Modal>
    </Card>
  );
};

export default OrderManagement; // 导出订单管理页面 